<template>
  <h1>管理员模块</h1>
<!-- 查询区 -->
<!--  添加修改对话框-->
  <el-dialog v-model="adminShowDlg" @close="resetAdminForm" :title="adminDlgTitle" width="600" >
    <el-form inline :model="adminModel"  ref="adminFormRef">
      <el-form-item label="用户名:">
        <el-input v-model="adminModel.phone" ></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input v-model="adminModel.password"></el-input>
      </el-form-item>
      <el-form-item label="角色:">
        <el-input v-model="adminModel.role"></el-input>
      </el-form-item>
      <el-upload class="avatar" action="/api/admins/avatar"
                 :on-success="avatarUploadSuccess" :show-file-list="false">
        <div class="img" v-if="adminModel.avatar"
             :style="'background-image: url('+(baseUrl+adminModel.avatar)+')'"></div>
        <el-icon v-else class="icon">
          <Plus/>
        </el-icon>
      </el-upload>
    </el-form>
    <template #footer>
      <el-button @click="adminShowDlg=false">取消</el-button>
      <el-button type="primary" @click="doSubmit">确定</el-button>
    </template>
  </el-dialog>

<!--  按钮区-->
<div class="action">
  <el-button type="primary" :icon="CirclePlus" @click="add">新增</el-button>
</div>
<!--  表格区-->
  <div class ="grid">
    <el-table :data="admins" stripe border
              @row-click="tblRefClick" ref="tblRef">
      <el-table-column label="ID" prop="id"/>

      <el-table-column label="用户名(手机号)" prop="phone"/>
<!--      <el-table-column label="密码" prop="password"/>-->

      <el-table-column label="头像"  fixed>
        <template #default="scope">
          <div class="row-avatar" :style="'background-image: url('+(baseUrl+scope.row.avatar)+')'"></div>
        </template>
      </el-table-column>
      <el-table-column label="角色" prop="role"/>
      <el-table-column label="操作">
        <template v-slot="slot">
          <el-button  @click="edit(slot.row)">编辑</el-button>
          <el-button  type="danger" @click="remove(slot.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
<!--  分页-->
  <div class="pagination" >
    <el-pagination
        v-model:current-page="adminPi.pageNo"
        v-model:page-size="adminPi.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="adminPi.total"
        class="admin-pi"
        background
        @change="adminPiChange"
    />
  </div>

</template>
<style>
.admin-pi {
  margin-top: 6px;
}


.avatar {
  width: 140px;
  height: 140px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  margin-left: 8px;
  display: flex;
}

.avatar .icon {
  font-size: 28px;
  margin-left: 50px;
  justify-content: center;
  align-items: center;
}

.avatar .img {
  width: 140px;
  height: 140px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.row-avatar {
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border: 1px solid #ccc;
}
</style>

<script setup>

import {nextTick, onMounted, reactive, ref, toRaw} from "vue";
import api from "@/util/api.js";
import {ElMessageBox,ElMessage} from "element-plus";
import {CirclePlus, Plus} from "@element-plus/icons-vue";
import baseUrl from "@/util/constant.js";
import {cloneDeep} from "lodash";
onMounted(() => {
  search();
});
let admins=ref([]);
let tblRef=ref();
let adminShowDlg=ref(false);
let adminModel=ref({
  phone:null,
  name:null,
  role:null,
  avatar:null,
  password:null
});
let mode="add";
function  add(){
  mode="add";
  adminShowDlg.value=true;
  adminDlgTitle.value="新增管理员";
}
function  edit(row){
  mode="edit";
  adminShowDlg.value=true;
  adminDlgTitle.value="修改管理员";
  nextTick(() => {
    // 深度克隆，确保表单数据与表格数据不共享引用
    adminModel.value = cloneDeep(toRaw(row));
  });
}
function  doAdd(){
  let params=toRaw(adminModel.value);
  api({
    url:"/admins",
    method:"post",
    data:params
  }).then(resp=>{
    if(resp.success){
      adminModel.value={
      phone:null,
        password:null,
        role:null,
        avatar: null
      }
      adminShowDlg.value=false;
      ElMessage.success("添加成功")
      search();
    }else {
      ElMessage.error("添加失败")
    }
  })
}
function  doEdit(){
  let  params=toRaw(adminModel.value)
  api({
    url:"/admins",
    method:"put",
    data:params
  }).then(resp=>{
    if(resp.success){
      adminModel.value={
        phone:null,
        password:null,
        role:null,
        avatar: null
      }
      adminShowDlg.value=false;
      ElMessage.success("修改成功")
      search();
    }else {
      ElMessage.error("修改失败")
    }
  })
}
function  doSubmit(){
  if(mode==="add"){
    doAdd();
  }else{
    doEdit();
  }
}
let adminPi=ref({
  pageNo:1,
  pageSize:5,
  total:0
});
//重置表单
function resetAdminForm() {
  adminFormRef.value.resetFields();
}
let adminDlgTitle=ref("添加管理员");
let adminFormRef=ref();
async function   search(pageNo=1,pageSize=5){
  let resp=await api({
    url:"/admins",
    method:"get",
    params:{
      pageNo,
      pageSize
    }
  })
  console.log(resp);
  admins.value=resp.data.records;
  adminPi.value={
    pageNo:resp.data.current,
    pageSize:resp.data.size,
    total:resp.data.total
  };
}
function avatarUploadSuccess(resp){
  adminModel.value.avatar=resp.data;

}
function adminPiChange(pageNo,pageSize){
  search(pageNo,pageSize)

}
function  tblRefClick(row){
  tblRef.value.toggleRowSelection(row);
}
function  remove(row){

  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then( ()=>{
    let id=[row.id];
    api({
      url:"/admins",
      method:"delete",
      data:id
    }).then(resp=>{
      if(resp.success){
        ElMessage.success("删除成功")
        search();
      }else{
        ElMessage.error(resp.msg || "删除失败")
      }
    })
  })
}
</script>